<!-- 设备管理页面 -->
<template>
	<view class="device-management-page">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">设备管理</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 设备统计 -->
		<view class="device-stats">
			<view class="stats-item">
				<text class="stats-number">{{ deviceList.length }}</text>
				<text class="stats-label">总设备</text>
			</view>
			<view class="stats-item">
				<text class="stats-number">{{ onlineDeviceCount }}</text>
				<text class="stats-label">在线设备</text>
			</view>
		</view>
		
		<!-- 设备列表 -->
		<view class="device-list">
			<view class="device-item" v-for="device in deviceList" :key="device.id">
				<view class="device-info">
					<view class="device-header">
						<text class="device-name">{{ device.deviceName }}</text>
						<view class="device-status">
							<text class="status-dot" :class="{ 'online': device.isOnline, 'offline': !device.isOnline }"></text>
							<text class="status-text">{{ device.isOnline ? '在线' : '离线' }}</text>
						</view>
					</view>
					<view class="device-details">
						<text class="device-type">{{ device.deviceType }}</text>
						<text class="device-brand">{{ device.deviceBrand }}</text>
						<text class="device-model">{{ device.deviceModel }}</text>
					</view>
					<view class="device-meta">
						<text class="last-active">最后活跃：{{ formatTime(device.lastActiveTime) }}</text>
						<text class="app-version" v-if="device.appVersion">版本：{{ device.appVersion }}</text>
					</view>
				</view>
				<view class="device-actions">
					<view class="current-device-badge" v-if="device.isCurrentDevice">
						<text class="badge-text">你</text>
					</view>
					<view class="action-buttons" v-if="!device.isCurrentDevice">
						<button class="action-btn delete" @tap="deleteDevice(device.id)">
							删除
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="deviceList.length === 0">
			<text class="empty-text">暂无设备</text>
			<text class="empty-desc">登录设备后将显示在这里</text>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { NETWORK_CONFIG } from '@/config/network.js';

// 响应式数据
const deviceList = ref([]);
const loading = ref(false);

// 计算属性
const onlineDeviceCount = computed(() => {
	return deviceList.value.filter(device => device.isOnline).length;
});

// 页面加载时获取设备列表
onMounted(async () => {
	await loadDeviceList();
});

// 加载设备列表
const loadDeviceList = async () => {
	try {
		loading.value = true;
		const token = uni.getStorageSync('accessToken');
		
		const res = await uni.request({
			url: `${NETWORK_CONFIG.API_BASE_URL}/api/device/list`,
			method: 'GET',
			header: {
				'Access-Token': `Bearer ${token}`
			}
		});
		
		if (res.data.success) {
			deviceList.value = res.data.data.devices || [];
		} else {
			uni.showToast({
				title: res.data.message || '获取设备列表失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取设备列表失败:', error);
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

// 删除设备
const deleteDevice = async (deviceId) => {
	try {
		const result = await new Promise((resolve) => {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个设备吗？删除后需要重新登录。',
				success: (res) => {
					resolve(res.confirm);
				}
			});
		});
		
		if (!result) return;
		
		const token = uni.getStorageSync('accessToken');
		
		const res = await uni.request({
			url: `${NETWORK_CONFIG.API_BASE_URL}/api/device/${deviceId}`,
			method: 'DELETE',
			header: {
				'Access-Token': `Bearer ${token}`
			}
		});
		
		if (res.data.success) {
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			});
			// 重新加载设备列表
			await loadDeviceList();
		} else {
			uni.showToast({
				title: res.data.message || '删除失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('删除设备失败:', error);
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		});
	}
};

// 格式化时间
const formatTime = (timeStr) => {
	if (!timeStr) return '未知';
	
	const time = new Date(timeStr);
	const now = new Date();
	const diff = now - time;
	
	if (diff < 60000) { // 1分钟内
		return '刚刚';
	} else if (diff < 3600000) { // 1小时内
		return `${Math.floor(diff / 60000)}分钟前`;
	} else if (diff < 86400000) { // 1天内
		return `${Math.floor(diff / 3600000)}小时前`;
	} else {
		return `${Math.floor(diff / 86400000)}天前`;
	}
};

// 返回上一页
const goBack = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.device-management-page {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding-bottom: 20px;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 10px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.nav-left {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 24px;
	color: white;
	font-weight: bold;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: white;
}

.nav-right {
	width: 40px;
}

/* 设备统计 */
.device-stats {
	display: flex;
	padding: 20px;
	gap: 20px;
}

.stats-item {
	flex: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
	backdrop-filter: blur(10px);
}

.stats-number {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}

.stats-label {
	font-size: 14px;
	color: #666;
}

/* 设备列表 */
.device-list {
	padding: 0 20px;
}

.device-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
	backdrop-filter: blur(10px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.device-info {
	flex: 1;
}

.device-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.device-name {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.device-status {
	display: flex;
	align-items: center;
	gap: 5px;
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.status-dot.online {
	background: #4CAF50;
}

.status-dot.offline {
	background: #999;
}

.status-text {
	font-size: 12px;
	color: #666;
}

.device-details {
	display: flex;
	gap: 10px;
	margin-bottom: 8px;
}

.device-type,
.device-brand,
.device-model {
	font-size: 12px;
	color: #666;
	background: #f0f0f0;
	padding: 2px 6px;
	border-radius: 4px;
}

.device-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.last-active,
.app-version {
	font-size: 11px;
	color: #999;
}

.device-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.current-device-badge {
	background: #4CAF50;
	color: white;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: bold;
}

.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.action-btn {
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	border: none;
	cursor: pointer;
}

.action-btn.delete {
	background: #f44336;
	color: white;
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: white;
}

.empty-text {
	display: block;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.empty-desc {
	font-size: 14px;
	opacity: 0.8;
}

/* 加载状态 */
.loading {
	text-align: center;
	padding: 40px;
	color: white;
}

.loading-text {
	font-size: 14px;
}
</style>
